<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Testing websockets</title>
<style>
fieldset div{height: 500px;overflow-y:auto;}
</style>
</head>
<body>
	<div>
		<input type="text" name="message" id="message" size="100" placeholder="消息内容"/>
		<input type="button" value="发送" onclick="send();" />
	</div>
	<fieldset>
		<legend>历史记录</legend>
		<div id="messages"></div>
	</fieldset>
	<script type="text/javascript">
	var webSocket;
	var address = 'ws://localhost:1000/websocket/chat';
	if ('WebSocket' in window){
	 webSocket = new WebSocket(address);  
	} else if ('MozWebSocket' in window){
	 webSocket = new MozWebSocket(address);
	}
    webSocket.onerror = function(event) {
    	document.getElementById('messages').innerHTML += 'error:'+event.data;
    };
 
    webSocket.onopen = function(event) {
    	document.getElementById('messages').innerHTML = '连接服务器成功';
    };
 
    webSocket.onmessage = function(event) {
    	var message = event.data;
   		document.getElementById('messages').innerHTML += '<br />server:' + message;
   		document.getElementById('messages').scrollTop=document.getElementById('messages').scrollHeight;
    };
    
    function send(){
   		var message = document.getElementById('message').value;
   		webSocket.send(message);
   		document.getElementById('messages').innerHTML += '<br />i say:'+document.getElementById('message').value;
   		document.getElementById('message').value='';
   		document.getElementById('messages').scrollTop=document.getElementById('messages').scrollHeight;
    }
  </script>
</body>
</html>